<template>
  <div class="search-field-component">
    <el-cascader
      :options="fieldList"
      :props="props"
      placeholder="搜索字段"
      class="filterableSelect"
      filterable
      clearable
      @change="filedSelect" />
  </div>
</template>
<script>
export default {
  props: {
    fieldList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      props: {
        value: 'id',
        label: 'name',
        children: 'fieldInfo'
      }
    };
  },
  created() {
    window.removeReadOnly();
  },
  methods: {
    filedSelect(query) {
      this.$emit('setTab', query);
    }
  }
};
</script>
<style lang="scss" scoped>
.search-field-component {
  .el-cascader {
    line-height: 1 !important;
    & ::v-deep {
      .el-icon-arrow-down {
        display: none;
      }
      .el-input--suffix{
        position: relative;
        &::before {
          position: absolute;
          top: 50%;
          margin-top: -8px;
          left: 10px;
          color: #999999;
          font-size: 16px;
          content: "\e778";
          font-family: element-icons!important;
          speak: none;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        .el-input__inner {
          width: 160px !important;
          padding-left: 29px;
        }
      }
    }
  }
}
</style>
